<template>
	<section class="performance-page">
		<el-card class="box-card">
			<div slot="header" class="clearfix">Input输入搜索[debounce]</div>
			<div class="text item">
				<el-input v-model="search" clearable placeholder="请输入搜索内容" @input="searchHandler"></el-input>
			</div>
		</el-card>
		<el-card class="box-card mg-t12">
			<div slot="header" class="clearfix">点击请求[throttle]</div>
			<div class="text item">
				<el-button type="success" @click="submitHandler">点一下嘛~</el-button>
				<p class="mg-t12">您点击 {{ submitTime }} 次啦！</p>
			</div>
		</el-card>
	</section>
</template>
<script>
import { throttle, debounce } from '@utils/performance'
export default {
	data() {
		return {
			submitTime: 0,
			search: '',
			datas: []
		}
	},
	methods: {
		submitHandler: throttle(function () {
			this.submitTime++
		}, 500),
		searchHandler: debounce(function () {
			this.search && this.$message.success(`搜索喽，key是 ${this.search} `)
		}, 1000),
	},
}
</script>
<style lang="less" scoped></style>
